<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<LINK href="../../style/main_table.css" type=text/css rel=stylesheet>
     <script src="../../js/vue.min.js"></script>
	 <script src="../../js/axios.js"></script>

  </head>
<title>期别信息输入</title>
<body>
      <div id="app1">
        <table width="100%"  border="0"  align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td width="6"><img src="../../images/main_01.gif" width="6" height="6"/></td>
          <td width="981" bgcolor="#A3A3A3"><img src="images/main_02.gif" width="560" height="6"></td>
          <td width="10"><img src="../../images/main_03.gif" width="6" height="6"/></td>
        </tr>
        <tr bgcolor="#F0F0F0">
          <td colspan="3" background="../../images/bg.gif" bgcolor="#F0F0F0" class="TABLE">
		  <table width="100%"  border="0" align="center" cellpadding="1" cellspacing="1" >
              <tr>
                <td background="../../images/main_title_bg1.gif">
				<table width="100%"  border="0" cellspacing="1" cellpadding="1">
                  <tr>
                    <td width="1%"><img src="../../images/dot9.gif" width="14" height="14"/></td>
                    <td width="99%">期别信息输入springboot+vue</td>
                  </tr>
                </table>
				</td>
              </tr>
              
              <tr><td>
             

              <table border=0 width=100%>
                <tr><td>期别名称:
                <input type=text name="qibiename" v-model="qibiename" size=15/>
                <input type=button value="查询"   v-on:click="getdataList">&nbsp;
                <input type=reset  value="清空"   v-on:click="resetfun">
                <input type=button value="增加"   onclick="window.location='add.html'">
				<input type=button value="批量删除"  @click="delALLData">
              </table>              
              </td>
              </tr>
               
              <tr>
                <td width="100%" class="TABLE5">
                <table class="table1" border=0 width="100%">
                  <tr align="center">
                    <td  nowrap width="8%" height="20" class="TD_title2">
                    <input type="checkbox" @click="selectAll" v-model='checkedALL'/>全选 
                    <td  nowrap width="40%" height="20" class="TD_title2"><strong>期别ID</strong></td>
                    <td  nowrap width="40%" height="20" class="TD_title2"><strong>期别名称</strong></td>
                    <td  nowrap width="20%" class="TD_title2"><strong>操作</strong></td>
                  </tr>
                  
                 
                 
                 <!--加入数据开始--> 
                   <tr v-for="(items,index) in datalist"  class='MenuItem'>
					   <!--将每一个checkbox控件绑定到一个数组：选中的话，则其值就会自动存入到数组中-->
	                  <td><input type="checkbox" name="item" v-model="checkList" :value="items.qibieid"/></td>
	                  <td  align="center"  class="TD2" nowrap>{{items.qibieid}}</td>
	                  <td  align="center"  class="TD2" nowrap>{{items.qibiename}}</td>
	                  <td  align="center"  class="TD2" nowrap>
	                  <input type="button" value="删除" @click="del(items.qibieid)"/>
					  <input type="button" name="update" value="修改" @click="modify(items)" />
	                  </td>
	                </tr>

              
 
                    
                </table></td>
              </tr>
          </table></td>
        </tr>
        <tr>
          <td><img src="images/main_05.gif" width="6" height="6"/></td>
          <td bgcolor="#A3A3A3"><img src="/images/main_06.gif" width="560" height="6"/></td>
          <td><img src="images/main_07.gif" width="6" height="6"/></td>
        </tr>
      </table>

</div>

<script>
        var app1=new Vue({
            el:'#app1',
            data:{
                id:'',
                qibiename:'',
                datalist:[],
                checkedALL:false,//全选框
                checkList:[] //全选反选
            },
            //钩子方法：创建页面时就调用获取数据显示
            created: function (){
                this.getdataList();
            },
			
			watch: { // 监视双向绑定的数据数组
					checkList: {
						handler(){ // 数据数组有变化将触发此函数
							if (this.checkList.length === this.datalist.length) {
								this.checked = true;
							} else {
								this.checked = false;
							}
						},
						deep: true // 深度监视
					}
			       },
			
            methods: {
                getdataList:function () {
                    axios.get('http://localhost:8044/qibieController/queryList?qibiename='+this.qibiename).
                    then(function (response){
                        var arr=response.data;
                        app1.datalist=arr;
                    }).catch(function (error) {
 
                    })
                },
                del:function (e) {
                    console.log(e);
                    axios.get('http://localhost:8044/qibieController/delete?qibieid='+e)
                        .then(function (response) {
                            app1.getdataList();
                        }).catch(function (error) {
 
                    })
                },
				resetfun:function(){
					this.qibiename='';
					app1.getdataList();
				},
				 //选中删除
				delALLData:function(){
					console.log("ids==="+this.checkList);
						axios.get('http://localhost:8044/qibieController/deletebach?mycheckbox='+this.checkList)
							.then(function (response) {
								app1.getdataList();
							}).catch(function (error) {
 
						})
				},
				
	            //修改回显
				modify:function (items) {
					//重置
					app1.resets();
					//回显
					this.id=items.id;
					this.name=items.qibiename;
				},
								
				selectAll(event){
				  if (!event.currentTarget.checked) {
				   this.checkList = [];
				  } else { //实现全选
				   this.checkList = [];
				   this.datalist.forEach((item, i) =>{
				    this.checkList.push(i);
				   });
				  }
				 }
				

				 
              }
        });
    </script>
</body>
</html>

